<template>
  <div class="custom-file-upload" @paste="handlePaste" @drop="handleDrop" @dragover.prevent>
    <p style="margin-top: auto">拖拽或粘贴区域</p>
  </div>
</template>

<script setup lang="ts">
import { defineEmits } from 'vue';

const emit = defineEmits<{
  (e: 'files-selected', files: File[]): void;
}>();

// 处理粘贴事件
const handlePaste = (event: ClipboardEvent) => {
  if (event.clipboardData) {
    const items = event.clipboardData.items;
    const files: File[] = [];

    for (let i = 0; i < items.length; i++) {
      const item = items[i];
      if (item.kind === 'file') {
        const file = item.getAsFile();
        if (file) {
          files.push(file);
        }
      }
    }

    if (files.length > 0) {
      emit('files-selected', files);
    }
  }
};

// 处理拖拽事件
const handleDrop = (event: DragEvent) => {
  event.preventDefault(); //阻止浏览器的默认行为
  if (event.dataTransfer) {
    const files = Array.from(event.dataTransfer.files);
    if (files.length > 0) {
      emit('files-selected', files);
    }
  }
};
</script>

<style scoped>
.custom-file-upload {
  width: 240px;
  height: 10px;
  border: 2px dashed #ccc;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  background-color: #f9f9f9;
}
</style>

